// 定义图片懒加载插件

// 引入vueuse的useIntersectionObserver用于图片的懒加载
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  // 插件的install方法，用于定义插件 install 方法接收 Vue 构造函数作为参数
  install(app) {
    // 定义全局指令v-img-lazy用于图片懒加载
app.directive("img-lazy",{
    mounted(el,binding){
        // el:指令绑定元素
        // binding:指令绑定表达式的值
        // vueuse的useIntersectionObserver的逻辑处理
        const { stop } =useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
                // isIntersecting-->布尔值,当前监听的el是否进入视口区域
                console.log(isIntersecting);
                if(isIntersecting){
                    // el进入视口区域
                    el.src = binding.value;
                    // 调用stop方法手动停止监听,避免内存浪费,因为 useIntersectionObserver一直在监听元素
                    stop();
                }
            },
          )
    }
})

}
}